<template>
    <div class="shell-info">
        <div class="body">
            <div class="title">
                <div class="line"></div>
                <div class="text">基本信息</div>
            </div>

            <div class="name">
                纲名：{{ shell.ganName }}
                <span class="eng">{{ shell.ganId }}</span>
            </div>
            <div class="name">
                目名：{{ shell.muName }}
                <span class="eng">{{ shell.muId }}</span>
            </div>
            <div class="name">
                科名：{{ shell.keName }}
                <span class="eng">{{ shell.keId }}</span>
            </div>
            <div class="name">
                属名：{{ shell.shuName }}
                <span class="eng">{{ shell.shuId }}</span>
            </div>

            <div class="title" v-if="shellItems.length">
                <div class="line"></div>
                <span class="text">相关贝类</span>
            </div>

            <div class="shell-items">
                <div
                    class="shell-item row"
                    v-for="(shell, index) in shellItems"
                    :key="index"
                >
                    <div class="cover">
                        <img
                            :src="require(`@/assets/shells/${shell.id}.jpg`)"
                        />
                    </div>

                    <div class="content">
                        <div class="name-info">
                            <span>{{ shell.name }}</span>
                            <span>{{ shell.id }}</span>
                        </div>

                        <div class="desc" v-if="shell.desc">
                            <div v-for="(tx, index) in shell.desc" :key="index">
                                {{ tx }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="title">
                <div class="line"></div>
                <span class="text">相关文章</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        shell: Object
    },
    data() {
        return {};
    },
    computed: {
        shellItems() {
            return this.shell.items.map(shell => {
                return {
                    name: shell[0],
                    field: shell[1],
                    id: shell[2],
                    desc: shell[3].split(";;")
                };
            });
        }
    },
    methods: {}
};
</script>


<style lang="less" scoped>
.shell-info {
    background: #fff;
    padding: 0 30px;
    .body {
        width: 100%;

        .title {
            display: flex;
            align-items: center;
            padding: 20px 0;
            .line {
                flex: 0 0 auto;
                width: 8px;
                height: 32px;
                background: #f00;
                margin-right: 15px;
            }

            .text {
                font-size: 32px;
                font-weight: bold;
            }
        }

        .name {
            font-size: 34px;
            margin-bottom: 15px;

            .eng {
                font-size: 30px;
                color: #666;
            }
        }

        .shell-item {
            padding: 0 0 30px 0;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            .cover {
                flex: 0 0 auto;
                width: 200px;
                margin-right: 30px;
                border-radius: 10px;
            }

            .content {
                width: 0;
                flex: 1 1 auto;
                max-height: 300px;
                overflow: hidden;

                .name-info {
                    font-size: 32px;
                    margin-bottom: 10px;
                }
            }

            .desc {
                font-size: 24px;
                color: #666;
            }
        }
    }
}
</style>